<script setup lang="ts">
import {Delete, Edit, Plus} from "@element-plus/icons-vue"
import crumbs from "@/components/crumbs.vue"
import tableComponent from '@/components/tableComponent/index.vue'
import {createVNode, ref} from "vue";
import {confirm} from "@/utils/utils";
import {ElMessage} from "element-plus";
import ruleOfInsureDialog from './role-of-insure-dialog/role-of-insure-dialog.vue'
import addOrEditPortConfigDialog from './add-or-edit-port-config-dialog/add-or-edit-port-config-dialog.vue'

const portConfigType = ref('add')
const tableData = ref([
    {
        id: 1,
        logo: 'https://pic.imgdb.cn/item/660cc4d99f345e8d03af9753.jpg',
        isUseIng: true,
        name: '娃哈哈',
        phone: '110120119'
    },
    {
        id: 2,
        logo: 'https://pic.imgdb.cn/item/660cc4d99f345e8d03af9753.jpg',
        isUseIng: false,
        name: '娃哈哈',
        phone: '110120119'
    }
])
const tableHeader = ref([
    {
        label: '规则名称',
        prop: 'id',
    },
    {
        label: '推送地址',
        prop: 'logo',
    },
    {
        label: '适用名称',
        prop: 'payDate',
    },
    {
        label: '是否启用',
        prop: 'isUseIng',
    },
    {
        label: '创建人',
        prop: 'name',
    },
    {
        label: '开户时间',
        prop: 'remark',
    },
    {
        label: '操作 ',
        prop: 'operate'
    }
])
const isShow = ref(false)
const isShowPortConfig = ref(false)
const switchFlag = ref(true)
const loading = ref(false)
const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0,
})
const onBeforeChange = () => {
    loading.value = true
    if (!switchFlag.value) {
        return new Promise(async (resolve) => {
            let res = await confirm('提示', createVNode('span', null, [
                '确定要',
                createVNode('strong', {
                    style: {
                        color: '#00D679'
                    }
                }, '启用'),
                '该接口数据吗？'
            ])).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作'
                })
                loading.value = false
                resolve(false)
            })
            if (res === 'confirm') {
                loading.value = false
                resolve(true)
            }
        })
    } else {
        return new Promise(async (resolve) => {
            const res = await confirm('提示', createVNode('span', null, [
                createVNode('strong', {
                    style: {
                        color: 'red'
                    }
                }, '关闭'),
                '该接口数据，会导致数据无法及时推送和收到反馈，可能会遭到重大损失，请谨慎操作。'
            ])).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作'
                })
                loading.value = false
                resolve(false)
            })
            if (res === 'confirm') {
                loading.value = false
                resolve(true)
            }
        })
    }

}
const onChangeStatus = (val: boolean, id: number | string) => {
    console.log(val, id)
    switchFlag.value = val
}
const onEditPortConfig = () => {
    portConfigType.value = 'edit'
    isShowPortConfig.value = true
}
const onAdd = () => {
    portConfigType.value = 'add'
    isShowPortConfig.value = true
}
const onDel = async (id: number | string) => {
    console.log(id)
    const res = await confirm('提示', createVNode('span', null, [
        '确定删除',
        createVNode('strong', {
            style: {
                color: 'red'
            }
        }, '关闭'),
        '的接口配置吗？'
    ])).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })
    })
    if (res === 'confirm') {
        console.log("删除")
    }
}
const onShowDetail = () => {
    isShow.value = true
}
const pageChange = () => {
    getData()
}
const getData = () => {
    console.log("getData")
}
const back = () => {
    window.history.back()
}
</script>

<template>
    <div>
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="渠道管理" title="渠道保司" title1="接口配置"></crumbs>
        </div>
        <div class="w-full box-border p-16px">
            <div class="flex items-center justify-between" mb-16px>
                <div class="text-16px text-#202536 font-bold">蓝工盾系统数据推送接口配置</div>
                <el-button type="primary" @click="onAdd">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    新建配置
                </el-button>
            </div>
            <el-card>
                <tableComponent :tableHeader="tableHeader" v-model:pageInfo="pageInfo" :tableData="tableData"
                                @pageChange="pageChange">
                    <template #logo>
                        <el-table-column prop="isUseIng" label="推送地址">
                            <template #default="scope">
                                <div class="text-#3E5FF5 cursor-pointer" @click="onShowDetail">推送地址</div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #isUseIng>
                        <el-table-column prop="isUseIng" label="是否启用">
                            <template #default="scope">
                                <el-switch :loading="loading" :before-change="onBeforeChange"
                                           v-model="scope.row.isUseIng"
                                           @change="onChangeStatus(scope.row.isUseIng, scope.row.id)"></el-switch>
                            </template>
                        </el-table-column>
                    </template>
                    <template #name>
                        <el-table-column prop="name" label="创建人">
                            <template #default="scope">
                                <el-popover placement="bottom-start" title="" effect="dark" :width="200" trigger="hover"
                                            content="">
                                    <div class="text-#ffffff text-center">手机号：{{ scope.row.phone }}</div>
                                    <template #reference>
                                        <div class="underline-black underline inline-block">{{
                                                scope.row.name
                                            }}
                                        </div>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </template>
                    <template #operate>
                        <el-table-column prop="operate" label="操作" width="100" align="center" fixed="right">
                            <template #default="scope">
                                <div class="w-full box-border flex items-center justify-around">
                                    <el-button class="!w-40px" text :disabled="scope.row.isUseIng" :icon="Delete"
                                               @click="onDel(scope.row.id)"/>
                                    <el-button class="!w-40px" text :icon="Edit" @click="onEditPortConfig"/>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </el-card>
        </div>
        <ruleOfInsureDialog v-model:show="isShow"></ruleOfInsureDialog>
        <addOrEditPortConfigDialog v-model:show="isShowPortConfig" :type="portConfigType"></addOrEditPortConfigDialog>
    </div>
</template>

<style scoped lang="scss">

</style>